import React,{useEffect,useState,useRef,useMemo} from 'react'
import axios from 'axios'
import * as echarts from 'echarts'
export default function EchartLine() {
  const boxRef=useRef()
  const [list,setList]=useState([])
  const fetchData=()=>{
    axios.get('http://www.zhaijizhe.cn:3006/chart/line').then(res=>{
        setList(res.data)
    })
  }
  const options=useMemo(()=>{
    return{
        title:{
            text:'某公司2023年销售情况'
        },
        xAxis:{
            data:list.map(item=>item.name)
        },
        yAxis:{},
        series:[
            {
                type:'line',
                data:list.map(item=>item.value)
            }
        ]
    }
  },[list])
  useEffect(()=>{
    fetchData()
    //echarts的初始化
    let chart=echarts.init(boxRef.current)
    chart.setOption(options)
  },[[...list]])
  return (
    <div ref={boxRef} style={{width:'500px',height:'300px'}}></div>
  )
}
